<template>
  <view class="coupon-box">
    <view class="left solid-right" :class="isUse?'':'bg'">
      <text class="text-center line-height-1"  >
        <text class="text-price"></text>
        <text class="">{{ discountPrice | filterPrice }}</text>
        <br>
        <text class=" text-sm text-white ">{{i18n['满']}}{{ limit | filterPrice }}{{i18n['元']}}{{i18n['可减']}}</text>
      </text>
    </view>
    <view class="right">
      <view class="content">
        <view class="text-333 text-bold text-df text-cut">{{ name }}</view>
        <view class="text-999 text-sm">{{i18n['全场可用']}}</view>

        <!-- <view class="text-999 text-sm">{{i18n['使用权限']}}: {{i18n['满']}}{{ limit | filterPrice }}{{i18n['元']}}{{i18n['使用']}}</view> -->
        <view class="text-999 text-sm">{{i18n['有效期至']}}: {{ time }}</view>
      </view>
      <view class="action" :class="[isUse ? 'disabled' : '']" @click.stop="handleClick">{{ isUse ? '已领取' : '立即使用'}}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    discountPrice: {
      type: [String, Number]
    },
    name: {
      type: String
    },
    time: {
      type: String
    },
    limit: {
      type: [String, Number]
    },
    isUse: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    filterPrice(price) {
      return parseFloat(price);
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="scss" scoped>
.coupon-box {
  height: 200rpx;
  display: flex;
  .right {
    flex: 1;
    background-color: #ffffff;
    border-bottom-right-radius: 16rpx;
    border-top-right-radius: 16rpx;
    display: flex;
    overflow: hidden;
    .content {
      flex: 1;
      padding: 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      overflow: hidden;
    }
    .action {
      width: 60rpx;
      min-width: 60rpx;
      max-width: 60rpx;
      height: 100%;
      background: #FC9C3A;
      font-family: PingFang SC;
      font-size: 28rpx;
      font-weight: 400;
      color: #fef0f0;
      writing-mode: tb-rl;
      letter-spacing: 6rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .action.disabled {
      color: #666666;
      background: #e1e1e1;
    }
  }
  .left {
    width: 200rpx;
    min-width: 200rpx;
    max-width: 200rpx;
    height: 100%;
    border-bottom-left-radius: 16rpx;
    border-top-left-radius: 16rpx;
    color: #ffffff;
    font-family: Arial;
    font-size: 56rpx;
    display: flex; 
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:#e1e1e1;
    &.bg{
      background:  linear-gradient(180deg, #FEDF76 0%, #F8A23E 100%);
    }
    .text-price {
      font-size: 24rpx;
    }
  }
}
.line-height-1{
  line-height: 1;
}
</style>
